<template>
  <g-form-wrap :title="title" :on-save-btn-click="onSaveBtnClick">
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="formRules"
      label-position="left"
      label-width="140px"
      inline
    >
      <div class="w-full">
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="名称(ZH)" prop="nameZh">
              <el-input
                v-model="formData.nameZh"
                placeholder="请输入名称(ZH)"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称(EN)" prop="nameEn">
              <el-input
                v-model="formData.nameEn"
                placeholder="请输入名称(EN)"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="标题图链接地址" prop="headerImg">
              <el-input
                v-model="formData.headerImg"
                placeholder="请输入标题图链接地址"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="标题描述" prop="headerDesc">
              <el-input
                v-model="formData.headerDesc"
                placeholder="请输入标题描述"
                :rows="5"
                type="textarea"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="反馈描述" prop="feedbackDesc">
              <el-input
                v-model="formData.feedbackDesc"
                placeholder="请输入反馈描述"
                :rows="5"
                type="textarea"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="尾部描述" prop="footerDesc">
              <el-input
                v-model="formData.footerDesc"
                placeholder="请输入尾部描述"
                :rows="5"
                type="textarea"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </g-form-wrap>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import { getSurveyTemplateByIdApi, addSurveyTemplateApi, updateSurveyTemplateApi } from '@/api/admin'
import { cloneDeep, omit } from 'lodash-es'

const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
let formData = ref(<
  {
    nameZh: string
    nameEn: string
    headerImg: string
    headerDesc: string
  }
>{
  nameZh: '',
  nameEn: '',
  headerImg: '',
  headerDesc: ''
})
const formRules = reactive<FormRules>({
  nameZh: [{ required: true, message: '请输入名称(ZH)', trigger: 'change' }],
  headerImg: [{ required: true, message: '请输入标题图链接', trigger: 'change' }],
  headerDesc: [{ required: true, message: '请输入标题描述', trigger: 'change' }]
})
const id = route.query.id as string | number
const title = route.meta.title as string
isEditing.value = id > 0 ? true : false
// 编辑时
if (isEditing.value) {
  const getSurveyTemplateByIdFunc = async () => {
    const data = await getSurveyTemplateByIdApi({ id: id })
    // console.log('data---', data)
    formData.value = cloneDeep(omit(data, ['History', 'history', 'repeatKeys']))
  }
  getSurveyTemplateByIdFunc()
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
  ruleForm.value?.validate((valid) => {
    if (valid) {
      loading(true)
      if (isEditing.value) {
        // console.log('formData---update', formData);
        updateSurveyTemplateApi(formData.value).then((res) => {
          // console.log('res---update', res);
          if (res * 1 === 200) ElMessage.success('编辑成功')
        })
      } else {
        // console.log('formData---add', formData);
        addSurveyTemplateApi(formData.value).then((res) => {
          // console.log('res---add', res);
          if (res * 1 === 201) ElMessage.success('添加成功')
        })
      }
      setTimeout(() => {
        loading(false)
        router.back()
      }, 100)
    } else {
      return false
    }
  })
}
</script>
